<script>
import request from "../../../utils/request"
import store from "../../../store"
import { userActionType } from "../../../store/modules/user"
import { getShowImage, handleUrlParams } from "../../../utils"
import urlUtils from "@/utils/urlUtils"

export default {
  name: "articleList",
  data() {
    return {
      articleList: [],
      pagination: {
        current: 1,
        size: 10,
      },
      queryParams: {
        examId: "",
        articlesClassId: "",
      },
      loadMoreStatusText: "more",
    }
  },
  computed: {
    userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  props: {
    type: String,
  },
  watch: {
    type: {
      async handler() {
        console.log("切换校园热点标签")
        switch (this.type) {
          case "校园热点":
            this.queryParams.articlesClassId = "2"
            break
        }
        if (!this.userSelectExamId) {
          await store.dispatch(userActionType.action.examInfo)
        }
        //没有选择考试则跳转到考试选择界面
        if (!this.userSelectExamId) {
          uni.redirectTo({
            url: handleUrlParams("/pages/examSelection/index", {
              redirectUrl: encodeURIComponent(urlUtils.getCurrentPageUrl()),
            }),
          })
          return
        }
        this.queryParams.examId = this.userSelectExamId
        this.resetPaginationAndLoadData()
      },
      immediate: true,
    },
  },
  methods: {
    getShowImage,
    getArticleList() {
      this.loadMoreStatusText = "loading"
      request({
        url: "inforArticles/listArticles",
        data: {
          ...this.queryParams,
          ...this.pagination,
        },
        errorHandle: true,
      })
        .then((data) => {
          if (data.total === 0) {
            this.loadMoreStatusText = "noMore"
            return
          }
          //处理文章标签
          for (let record of data.records) {
            if (record.articlesLabel) {
              record.articlesLabel = JSON.parse(record.articlesLabel)
            } else {
              record.articlesLabel = []
            }
          }
          this.articleList.push(...data.records)
          if (this.articleList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
        })
        .catch(() => {
          this.loadMoreStatusText = "more"
        })
    },
    //重置分页并加载数据
    resetPaginationAndLoadData() {
      this.pagination.current = 1
      this.articleList = []
      this.getArticleList()
    },
    //页面到达底部加载更多（供父组件调用）
    handleReachBottom() {
      if (this.loadMoreStatusText === "noMore" || this.loadMoreStatusText === "loading") {
        return
      }
      this.pagination.current++
      this.getArticleList()
    },
    //资讯文章点击查看详情
    async articleClick(item) {
      //获取资讯文章详情（统计阅读量）
      request({
        url: "inforArticles/getArticlesDetails",
        data: {
          articlesId: item.articlesId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        //跳转到外部的地址
        if (item.linkType === "EXTERNAL") {
          uni.navigateTo({
            url: handleUrlParams("/pages/web-view/web-view", {
              path: encodeURIComponent(item.linkUrl),
            }),
          })
          //跳转到内部的详情页
        } else if (item.linkType === "NONE") {
          uni.navigateTo({
            url: handleUrlParams("/pages/examPreparationTips/detail", {
              articlesId: item.articlesId,
            }),
          })
        }
      })
    },
  },
}
</script>

<template>
  <view class="component">
    <view class="article-list">
      <view class="article-item" v-for="item in articleList" :key="item.articlesId" @click="articleClick(item)">
        <image class="icon" :src="getShowImage(item.articlesIcon)" mode="aspectFill"></image>
        <view class="right">
          <!--					文章标题-->
          <view class="article-title">{{ item.articlesTitle }}</view>
          <!--					文章标签-->
          <view class="article-label-list">
            <text class="article-label-item" v-for="label in item.articlesLabel" :key="label">{{ label + "  " }}</text>
          </view>
          <!--					文章发布时间-->
          <view class="article-time">{{ item.publishTime }}</view>
          <!--					文章阅读量-->
          <view class="article-read">{{ item.readingValue + " " }}人阅读</view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  .article-list {
    .article-item {
      padding: 20rpx 0;
      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
      display: flex;
      .icon {
        width: 170rpx;
        height: 170rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      .right {
        width: 0;
        flex: 1;
        .article-title {
          font-size: 34rpx;
          color: #333;
          margin-bottom: 20rpx;
          //文本溢出部分不换行而是显示省略号
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .article-label-list {
          .article-label-item {
            font-size: 26rpx;
            color: var(--text-color-theme);
          }
        }
        .article-time,
        .article-read {
          font-size: 26rpx;
          color: #999;
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>
